<template>
  <div>
    <data-table ref="pagingTable" :options="options" :list-query="listQuery">
      <template #filter-content>
        <dic-list-select v-model="listQuery.params.examType" dic-code="exam_type" title="选择考试类型" />
        <dic-list-select v-model="listQuery.params.openType" dic-code="open_type" title="开放类型" />

        <el-date-picker v-model="listQuery.params.startTime" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="考试开始时间" size="small" />

        <el-date-picker v-model="listQuery.params.endTime" class="filter-item" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="考试结束时间" size="small" />

        <el-input v-model="listQuery.params.title" placeholder="搜索考试名称" style="width: 200px" size="small" class="filter-item" />
      </template>

      <template #data-columns>
        <el-table-column label="考试名称" prop="title" show-overflow-tooltip>
          <template v-slot="scope">
            <el-link type="primary" @click=";(options.examQuShowDialog = true), (options.examId = scope.row.id)">{{ scope.row.title }}</el-link>
            <!-- <detail-link :id="scope.row.id" :title="scope.row.title" to="UpdateExam" permission="exam:update" /> -->
          </template>
        </el-table-column>

        <el-table-column label="考试类型" align="center" width="120px" prop="examTypeDictText" />

        <el-table-column label="开放权限" align="center" width="120px" prop="openTypeDictText" />

        <el-table-column label="考试时间" align="center" width="180px" show-overflow-tooltip>
          <template v-slot="scope"> {{ scope.row.startTime }} ~ {{ scope.row.endTime }} </template>
        </el-table-column>

        <el-table-column label="考试总分" prop="totalScore" align="center" width="100px" />

        <el-table-column label="及格线" prop="qualifyScore" align="center" width="100px" />

        <el-table-column label="状态" align="center" width="120px">
          <template v-slot="scope">
            {{ scope.row.state }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="280px">
          <template v-slot="scope">
            <!-- <router-link :to="{ name: 'ExamStat', params: { examId: scope.row.id } }" style="margin-left: 10px">
              <el-link type="primary" icon="el-icon-pie-chart">统计</el-link>
            </router-link> -->

            <!-- <router-link :to="{ name: 'ExamWatch', params: { examId: scope.row.id } }" style="margin-left: 10px">
              <el-link type="primary" icon="el-icon-view">监考</el-link>
            </router-link> -->

            <el-link style="margin-left: 10px" type="primary" icon="el-icon-document" @click=";(options.examAnswerDetailDialog = true), (options.examId = scope.row.id)">学生答题情况</el-link>
            <el-link style="margin-left: 10px" type="danger" icon="el-icon-delete" @click="delExam(scope.row.id)">删除</el-link>

            <!-- <el-link style="margin-left: 10px" type="primary" icon="el-icon-paperclip" @click="showShare(scope.row.id)">通知</el-link> -->
          </template>
        </el-table-column>
      </template>
    </data-table>

    <share-exam-dialog :dialog-show.sync="shareDialog" :exam-id="examId" />
  </div>
</template>

<script>
import DataTable from '@/components/DataTable'
import DicListSelect from '@/components/DicListSelect'
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令
import ShareExamDialog from '@/views/admin/exam/exam/components/ShareExamDialog'
import { mapGetters } from 'vuex'
import { options } from 'dropzone'
import { post } from '@/utils/request'

export default {
  name: 'ExamList',
  components: { ShareExamDialog, DetailLink, DicListSelect, DataTable },
  directives: { permission },
  data() {
    return {
      openTypes: [
        {
          value: 1,
          label: '完全开放'
        },
        {
          value: 2,
          label: '指定部门'
        },
        {
          value: 3,
          label: '指定人员'
        },
        {
          value: 9,
          label: '口令密码'
        }
      ],

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        add: {
          enable: true,
          permission: 'exam:add',
          router: { name: 'AddExam', params: { tmplId: '0' } }
        },
        edit: {
          enable: true,
          permission: 'exam:update',
          router: { name: 'UpdateExam', params: { id: '$id' } }
        },
        delete: {
          enable: true,
          permission: 'exam:delete',
          url: '/api/exam/exam/delete'
        },
        // 可批量操作
        multi: true,
        // 批量操作列表
        multiActions: [
          {
            value: 'enable',
            label: '启用',
            url: '/api/exam/exam/state'
          },
          {
            value: 'disable',
            label: '禁用',
            url: '/api/exam/exam/state'
          }
        ],
        // 列表请求URL
        listUrl: '/api/temp/exam/paging',
        // 考试题目展示的 dialog
        examQuShowDialog: false,
        // 考试ID
        examId: '',
        // 考生答题详情
        examAnswerDetailDialog: false
      },

      shareDialog: false,
      examId: ''
    }
  },

  computed: {
    ...mapGetters(['siteData'])
  },
  methods: {
    showShare(id) {
      this.shareDialog = true
      this.examId = id
      console.log('考试ID', this.examId)
    },
    delExam(examId) {
      post('/api/temp/exam/del', { examId }).then(res => {
        if (res.success) {
          window.location.reload()
        }
      })
    }
  }
}
</script>
